<template>
    <CardBox title="楼盘基本信息">
        <Grid column-num="3" :border="false" :center="false">
            <template v-for="(item, index) in infoList" :key="index">
                <GridItem v-if="!(info.labelCode==='D0066-02' && item.label==='租金')" use-slot>
                    <div class="grid-value">
                        {{ item.value || '-' }}
                    </div>
                    <div class="grid-label">
                        {{ item.label }}
                    </div>
                </GridItem>
            </template>
        </Grid>
    </CardBox>
</template>

<script lang="ts"  setup>
import { Grid, GridItem } from 'vant';
import { ref, watch, PropType, onMounted } from 'vue';
import CardBox from './components/CardBox.vue';
import { PremisesInfoModel } from './onePage.module';

const props = defineProps({
    info: {
        type: Object as PropType<PremisesInfoModel>,
        require: true,
        default: () => ({}),
    },
});

const infoList = ref();

const initData = ()=>{
    if(props.info){
        infoList.value = [
            {
                label: '楼宇类型',
                value: props.info.premisesTypeName || '-',

            },
            {
                label: '平均售价',
                value: `${props.info.accuratePrice || '-'}元`,

            },
            {
                label: '楼龄',
                value: `${props.info.premisesAge || '-'}年`,

            },
            {
                label: props.info.labelCode === 'D0066-02'?'入住率':'出租率',
                value: props.info.labelCode === 'D0066-02'?`${props.info.inHouseRate || '-'}%`:`${props.info.lettingRate || '-'}%`,
            },
            {
                label: '车位数',
                value: `${props.info.parkingNum || '-'}个`,

            },
            {
                label: '物业费',
                value: `${props.info.managementPrice || '-'}元/m²/月`,

            },
            {
                label: '租金',
                value: `${props.info.rentPrice || '-'}元/m²`,

            },
            {
                label: '最低楼层',
                value: `${props.info.minStorey || '-'}层`,

            },
            {
                label: '最高楼层',
                value: `${props.info.maxStorey || '-'}层`,

            }
        ];
    }
};

watch(
    () => props.info,
    () => {
        initData();
    },{
        deep: true
    }
);

onMounted(()=>{
    initData();
});
</script>

<style>
:root {
    --van-grid-item-content-padding: 10px 0;
}
</style>

<style lang="scss" scoped>
.grid-label {
    font-family: PingFangSC-Regular, sans-serif;
    font-weight: 400;
    font-size: 12px;
    height: 17px;
    color: #999999;
    margin-top: 4px;
}

.grid-value {
    font-family: PingFangSC-Medium, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #181819;
    height: 20px;
}
:deep(.content) {
    margin-top: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 8px !important;
}
:deep(.van-grid-item__content) {
    padding: 10px 0;
}
</style>
